<template>
    <div class="app-container home">
      <div class="fr">
        <el-form :inline="true" :model="formInline" class="">
          <el-form-item label="关键词" prop="keyword">
            <el-input
              v-model="formInline.keyword"
              clearable
              placeholder="请输入"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="文件编码" prop="fileCode">
            <el-input
              v-model="formInline.fileCode"
              clearable
              placeholder="请输入"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="文件版本" prop="fileVersion">
            <el-input
              v-model="formInline.fileVersion"
              clearable
              placeholder="请输入"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="条款编码" prop="provisionCode">
            <el-input
              v-model="formInline.provisionCode"
              clearable
              placeholder="请输入"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch" size="small">搜索</el-button>
            <el-button type="primary" plain @click="handleReset" size="small" >重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn">
        <el-button type="primary" size="small" @click="handleAdd">新增</el-button>
      </div>
      <el-table v-loading="loading" :data="tableData">
        <el-table-column
          label="序号"
          type="index"
          width="50"
          :index="indexMethod"
        >
        </el-table-column>
        <el-table-column prop="fileCode" label="文件编码"> </el-table-column>
        <el-table-column prop="fileName" label="文件名称"> </el-table-column>
        <el-table-column prop="fileVersion" label="文件版本" />
        <el-table-column prop="provisionCode" label="条款编码" />
        <el-table-column prop="provisionContent" label="条款要求" />
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleView(scope.row)">查看</el-button>
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <el-pagination
        class="p20 fr"
        v-if="total > 0"
        :background="true"
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        :layout="'total, sizes, prev, pager, next, jumper'"
        :page-sizes="[10, 30, 50, 100]"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handlepageNumChange"
      />
      <ClauseLibraryDialog :datas="clauseLibraryDatas" v-if="dialogVisible" :type="type" @on-close="handleDialogClose" @on-sure="onSearch"/>
    </div>
  </template>
  
  <script>
  import ClauseLibraryDialog from '@/components/Editor/clauseLibraryDialog.vue'
  import { getProvisionList, deleteProvision } from "@/api/clauseLibrary";
  export default {
    name: "ClauseLibrary",
    components:{ClauseLibraryDialog},
    data() {
      return {
        formInline: {
          keyword: "",
          fileCode: "",
          fileVersion:'',
          provisionCode:''
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        loading: false,
        total: 0,
        tableData: [],
        dialogVisible:false,
        clauseLibraryDatas: {},
        type:'add',
      };
    },
    methods: {
      indexMethod(index) {
        return (
          (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
        );
      },
      async onSearch() {
        try {
          this.loading = true;
          const res = await getProvisionList({
            ...this.queryParams,
            ...this.formInline,
          });
          this.tableData = res.data.list;
          this.total = res.data.count;
        } catch (error) {
          console.log(error);
        } finally {
          this.loading = false;
        }
      },
      handleReset() {
        this.formInline = {
          keyword: "",
          fileCode: "",
          fileVersion:'',
          provisionCode:''
        };
        this.onSearch();
      },
      handleSearch() {
        this.queryParams.pageNum = 1;
        this.onSearch();
      },
      handleSizeChange(val) {
        if (this.queryParams.pageSize * val > this.total) {
          this.queryParams.pageNum = 1;
        }
        this.onSearch();
      },
      handlepageNumChange() {
        this.onSearch();
      },
      handleAdd(){
        let obj= null
        if(this.tableData.length){
            obj = this.tableData[0]
        }
        this.clauseLibraryDatas = {
            id: undefined,
            fileName:obj? obj.fileName:'',
            fileCode: obj? obj.fileCode:'',
            fileVersion:obj?obj.fileVersion:'',
            provisionCode: '',
            provisionContent: '',
        }
        this.type = 'add'
        this.dialogVisible = true
      },
      handleView(row){
        this.clauseLibraryDatas = row
        this.type = 'view'
        this.dialogVisible = true
      },
      handleEdit(row){
        this.clauseLibraryDatas = row
        this.type = 'edit'
        this.dialogVisible = true
      },
      handleDelete(id){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            deleteProvision(id).then(res => {
            this.$message({type: 'success', message: '删除成功!'});
            this.handleSearch();
          })
        }).catch(() => {
          this.$message({type: 'info',message: '已取消删除'});          
        });
      },
      handleDialogClose(){
        this.dialogVisible = false
      }
    },
    mounted() {
      this.handleSearch();
    },
  };
  </script>
  <style scoped>
  .btn{
    padding: 16px;
  }
  </style>